<template>
    <div>
        <div>
            <RadioGroup v-model="type">
                <Radio :label="1">图片</Radio>
                <Radio :label="2">语音</Radio>
                <Radio :label="3">视频</Radio>
            </RadioGroup>
        </div>
        <div>
            <div v-if="type == 1">
                <Scroll v-if="dataimg.length" :on-reach-bottom="handleReachBottomimg" :height="height" :distance-to-edge="[1,1]">
                    <Row :gutter="8" type="flex">
                        <template v-for="(item,index) in dataimg">
                            <Col>
                            <Card class="ivu-mb-16" v-width="250"  :key="item.id" >
                                <div class="imageurl" >
                                    <img :src="item.path" alt="" class="canvasImg" >
                                </div>
                                <div style="text-align: center;">{{item.name}}111</div>
                                <Row type="flex" align="middle" justify="space-between" class="ivu-mt-8">
                                    <Col><Button size="small" class="realdel" @click="changerealdel(datas)" v-hasC="{name: '-v1-material-img-img-completely-del',flag: '/v1/material/img/img-completely-del'}" ><b>彻底删除</b></Button></Col>
                                    <Col><Button size="small" class="reduction" @click="changereduction(datas)"  v-hasC="{name: '-v1-material-img-img-reduction',flag: '/v1/material/img/img-reduction'}"><b>还原图片</b></Button></Col>
                                </Row>
                            </Card>
                    </Col>
                        </template>
                    </Row>
                    <div v-if="Message " style="display: flex;align-items: center;justify-content: center;color: #aaa;">被你看完了</div>
                </Scroll>
                <div v-else style="height:300px;display: flex;align-items: center;justify-content: center;color: #aaa;">暂无数据</div>
            </div>
            <!-- <div v-if="type == 2">
                <Scroll v-if="dataudio.length" :on-reach-bottom="handleReachBottomaudio" :height="height" :distance-to-edge="[1,1]">
                    <Row :gutter="8" type="flex">
                        <template v-for="(item,index) in dataaudio">
                            <Col >
                            <Card class="ivu-mb-16" v-width="250"  :key="item.id" >
                                <div class="imageurl" >
                                    <img :src="item.path" alt="" class="canvasImg" >
                                </div>
                                <div style="text-align: center;">{{item.name}}</div>

                            </Card>
                        </Col>
                        </template>
                    </Row>
                    <div v-if="Message " style="display: flex;align-items: center;justify-content: center;color: #aaa;">被你看完了</div>
                </Scroll>
                <div v-else style="height:300px;display: flex;align-items: center;justify-content: center;color: #aaa;">暂无数据</div>
            </div> -->
            <div v-if="type == 3">
                <Scroll v-if="datavideo.length" :on-reach-bottom="handleReachBottomvideo" :height="height" :distance-to-edge="[1,1]">
                    <Row :gutter="8" type="flex">
                        <template v-for="(item,index) in datavideo">
                            <Col :key="item.id">
                            <cardvideo @videodel="videodel" :bool="true" :data="item" :index="index"/>
                    </Col>
                        </template>
                    </Row>
                    <div v-if="Message " style="display: flex;align-items: center;justify-content: center;color: #aaa;">被你看完了</div>
                </Scroll>
                <div v-else style="height:300px;display: flex;align-items: center;justify-content: center;color: #aaa;">暂无数据</div>
            </div>
        </div>
    </div>
</template>
<script>
    import { getrecycleList } from '@/api/myuplod.js'
    // import cardImage from './cardImage.vue'
    // import cardvideo from './cardvideo.vue'
    import { rbacmenumenuclick  } from '@api/menuclick';
    export default {
        props: {
            remark: String
        },
        // components: { cardImage, cardvideo },
        data () {
            return {
                Message: false,
                type:1,
                height: null,
                paramsimg: { remark: '', page: 1, pageSize: 24, type: 1 },
                paramsvideo: { remark: '', page: 1, pageSize: 24, type: 2 },
                dataimg: [],
                datavideo: [],
                totalimg: null,
                totalvideo: null
            }
        },
        mounted () {
             this.height = document.documentElement.clientHeight - 320
        },
        methods: {

            initial() {
                if (this.type == 1) {
                    this.paramsimg.page = 1
                    this.askDataimg()
                } else {
                    this.paramsvideo.page = 1
                    this.askDatavideo()
                }
                this.rbacmenumenuclick()
            },
            rbacmenumenuclick(){
                let params={
                    menu_name:'素材库',
                    module_name:'回收站'
                }
                rbacmenumenuclick(params).then(() => {}).catch(() => {})
            },
            askDataimg() {
                this.paramsimg.remark = this.remark
                this.Message = false
                getrecycleList(this.paramsimg).then(res => {
                    this.dataimg = res.list
                    this.totalimg = res.totalimg
                })
            },
            askDatavideo() {
                this.paramsvideo.remark = this.remark
                this.Message = false
                getrecycleList(this.paramsvideo).then(res => {
                    this.datavideo = res.list
                    this.totalvideo = res.totalimg
                })
            },
            askDataimgs() {
                this.paramsimg.remark = this.remark
                getrecycleList(this.paramsimg).then(res => {
                    this.dataimg.push(...res.list)
                })
            },
            askDatavideos() {
                this.paramsvideo.remark = this.remark
                getrecycleList(this.paramsvideo).then(res => {
                    this.datavideo.push(...res.list)
                })
            },
            imgdel(index) {
                this.dataimg.splice(index, 1)
            },
            videodel(index) {
                this.datavideo.splice(index, 1)
            },
            handleReachBottomimg() {
                if (this.totalimg > this.paramsimg.pageSize * this.paramsimg.page) {
                    this.paramsimg.page++
                    this.askDataimgs()
                } else {
                   this.Message = true
                }
            },
            handleReachBottomvideo() {
                if (this.totalvideo > this.paramsvideo.pageSize * this.paramsvideo.page) {
                    this.paramsvideo.page++
                    this.askDatavideos()
                } else {
                   this.Message = true
                }
            },
             // 彻底删除图片
             changerealdel (item) {
                this.$Modal.confirm({
                    title: '彻底删除该图片，将无法恢复！如果该图片外部站点有引用，将导致外网图片无法访问。',
                    onOk: () => {
                        let params = {
                            id: item.id,
                            type: 1
                        }
                        materialimgimgcompletelydel(params).then(res => {
                            this.$Message.info('删除成功');
                            this.$emit('imgdel', this.index);
                        })
                    }
                })
            },
            // 还原视频或者图片
            changereduction (item) {
                this.$Modal.confirm({
                    title: '是否还原该图片?',
                    onOk: () => {
                        let params = {
                            id: item.id,
                            type: 1
                        }
                        materialimgimgreduction(params).then(res => {
                            this.$Message.info('还原成功');
                            this.$emit('imgdel', this.index);
                        })
                    }
                })
            },
        }
    }
</script>
<style lang="less" scoped>
.imageurl{
    width: 100%;
    height: 250px;
    .canvasImg{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
</style>
